<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>伪类选择器</title>
		<style>
		/*伪类选择器  语法：任意选择器：hover【悬停】  每个伪类选择器,具备特点
		             所有元素具备：hover 【常见的伪类选择类】
					 */
					h1:hover{
						background: #aaaaff;
						color: #00ff00;
					}
		/**
		 * 
		*伪类选择器：    ：link         链接未点击时状态
		 *              ：active       链接被点击时状态 
		*			   ：visited       链接点击后状态
		*			   ：hover         悬停连接时状态
		*主要结合在一起：针对a元素效果
		*/
	   a:link{/*未访问状态*/
		   color: #ff557f;
		   /*去掉超链接下划线*/
		   text-decoration: none;
	   }
	   a:active{/*被点击时状态*/
		   color: #aaaaff;
		   background: #fff00f;
	   }
	   a:visited{/*点击后状态*/
		   color: #aaaaff;
		   background: #ffaa00;
	   }
	   a:hover{
		   font-size: 36px;
	   }
	   /**
		* 伪类选择器：input：focus 获取焦点 鼠标点击输入框时效果
		* 
		针对 输入框 input 元素
		*/
	   input:focus{
		   background: #ffff00;
	   }
	   /*伪类选择器:    :fister-child 第一个儿子元素
	                   ：Last-child  最后一个儿子元素
					   ：nth-child（n）匹配n个儿子元素
	    针对：父子级，默认父子级 table，列表
	   */
	  li:first-child{
		background: #00ff00;
		  color: #5500ff;
	  }
	  li:last-child{
		  font-size: 15pt;
	  }
	  li:nth-child(2){
		  background: #ffff00;
		  font-size: 15px;
	  }
	  li:nth-child(3){
	  		  background: #00ffff;
	  		  font-size: 15px;
			  }
		</style>
	</head>
	<body>
	<h1>鼠标悬停效果</h1>
	<a href="#">超链接</a>
	<input type="text">
	<!--元素之间存在父子关系，默认存在父子关系 -->
	<ol>
	<li>唐山</li>
	<li>邢台</li>
	<li>承德</li>
	<li>保定</li>
	</ol>
	</body>
</html>